<script setup>
import {defineProps} from "vue";

const squareUrl = "vue/src/assets/logo.png";

const props = defineProps({
  answer: {
    type: Object,
    required: true,
  },
});

</script>

<template>
  <div class="leftBlock" v-if="props.answer.role==='assistant'">
    <el-avatar shape="square" :size="50" :src="squareUrl"/>
    <div class="limit-item-left">
      <el-text style="color: #FAFAFA">{{ props.answer.content }}</el-text>
    </div>
  </div>
  <div class="rightBlock" v-else>
    <el-card class="limit-item-right">
      <el-text style="color: #FAFAFA">{{ props.answer.content }}</el-text>
    </el-card>
    <el-avatar shape="square" :size="50" :src="squareUrl"/>
  </div>

</template>

<style>
.leftBlock {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.rightBlock {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.limit-item-left {
  background-color: #409EFF;
  padding: 5px;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin-left: 5px;
  max-width: 50%;
}

.limit-item-right {
  background-color: #409EFF;
  padding: 5px;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  margin-right: 5px;
  max-width: 50%;
}
</style>